<script setup lang="ts">
import { ref, reactive } from "vue";
import { aqiOvershoot12Trend } from "@/api";
import { ElMessage } from "element-plus"

const option = ref({});
const monthData = ref<any>([]);
const countData = ref<any>([]);

type DataType = {
  month: number;
  count: number;
};

const getData = () => {
  aqiOvershoot12Trend().then((res) => {
    console.log("左下--", res);
    if (res.code == 0) {
      const data = res.data as DataType[]
      data.forEach(item => {
        monthData.value.push(item.month)
        countData.value.push(item.count)
      })
      setOption();
    } else {
      ElMessage.error(res.msg)
    }
  }).catch(err => {
    ElMessage.error(err)
  });
};

getData();
const setOption = () => {
  option.value = {
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      data: monthData.value,
      axisLine: {
        lineStyle: {
          color: '#374a6a'
        }
      }
    },
    yAxis: {
      type: 'value',
      splitLine: { // 分割线配置
        show: true, // 显示分割线
        lineStyle: { // 分割线样式
          color: '#122641' // 分割线颜色
        }
      },
      axisLine: {
        lineStyle: {
          color: '#374a6a'
        }
      }
    },
    series: [
      {
        data: countData.value,
        type: 'line',
        smooth: true
      }
    ]
  };
};
</script>

<template>
  <v-chart class="chart" :option="option" />
</template>

<style scoped lang="scss"></style>
